<template>
  <el-select v-if="!readonly || disabled" v-model="currentValue" :disabled="disabled" :placeholder="placeholder" :clearable="clearable" 
    :multiple="multiple " :filterable="filterable"
    @input="handleInput" @change="handleChange" @clear="handleClear" @visible-change="handleVisibleChange" @remove-tag="handleRemoveTag">
    <el-option v-for="option in currentOptions" :label="option[labelkey]" :value="option[valuekey]" :key="option[valuekey]"></el-option>
  </el-select>
</template>

<script>
const BOOLEAN_OPTIONS = [
  {
    text: '是',
    value: true
  },
  {
    text: '否',
    value: false
  }
]
export default {
  name: 'NiceSelect',
  props: {
    value: [String, Number, Boolean, Array],
    text: Boolean,
    type: {
      type: String,
      default: 'enum'
    },
    group: {
      type: Object,
      default: function () {
        return {}
      }
    },
    visible: Number,
    options: Array,
    mode: String,
    disabled: Boolean,
    placeholder: String,
    clearable: Boolean,
    multiple: Boolean,
    filterable:Boolean,
    valuekey:{
      type: String,
      default: function () {
        return "value"
      }
    },
    labelkey:{
      type: String,
      default: function () {
        return "label"
      }
    },
  },
  data () {
    return {
      currentValue: this.value,
      currentOptions: this.options || []
    }
  },
  computed: {
    readonly () {
      return this.mode === 'VIEW'
    }
  },
  watch: {
    value (val, oldValue) {
      this.setCurrentValue(val)
    },
    options (val, oldValue) {
      this.currentOptions = val
    },
    group (val, oldValue) {
      if (val) {
        this.getOptions(val)
      } else {
        this.currentOptions = []
      }
      if (oldValue) {
        this.$emit('input', '')
      }
    }
  },
  created () {
    if (!this.options) {
      if (this.group) {
        this.getOptions(this.group)
      } else if (this.type === 'boolean') {
        this.currentOptions = BOOLEAN_OPTIONS
      }
    }
  },
  methods: {
    setCurrentValue (value) {
      if (value !== this.currentValue) {
        this.currentValue = value
      }
      this.$emit('input', value)
    },
    handleInput (value) {
      this.setCurrentValue(value)
    },
    handleChange (value) {
      this.$emit('change', value)
    },
    handleClear (value) {
      this.$emit('clear', value)
    },
    handleVisibleChange (value) {
      this.$emit('visible-change', value)
    },
    handleRemoveTag (value) {
      this.$emit('remove-tag', value)
    },
    // 获取字典表数据
    async getOptions (e) {
    //   let tabelName = {tableName: e.tableName}
    //   let res = await queyEnumByTableName(tabelName)
    //   if (res[0]) {
    //     return
    //   }
    //   let data = res[1]
    //   if (data && data.code === 0) {
    //     this.currentOptions = data.data.filter(ele => ele.display_value === e.name)[0].child.map(_ => ({
    //       text: _.display_value,
    //       value: _.t_id
    //     }))
    //   }
    }
  }
}
</script>
